﻿@model Peninsula.Site.Data.Models.MultiFileUploadModel
 @*多用文件上传组件*@


<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
            <button class="btn btn-info start">
                <i class="fa fa-upload"></i>
                <span>Start</span>
            </button>
            {% } %}
            {% if (!i) { %}
            <button class="btn btn-danger cancel">
                <i class="fa fa fa-ban"></i>
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery ><img src="{%=file.thumbnailUrl%}" width="80" height="80"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                <i class="fa fa-trash-o"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
            <button class="btn btn-warning cancel">
                <i class="fa fa fa-ban"></i>
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}
</script>

<script type="text/javascript">
    var FormFileUpload = function () {
        return {
            //main function to initiate the module
            init: function () {

                $fileUploadForm = $('#multiFileUpload');

                // Initialize the jQuery File Upload widget:
                $fileUploadForm.fileupload({
                    // Uncomment the following to send cross-domain cookies:
                    //xhrFields: {withCredentials: true},
                    url: '@Html.Raw(Model.UploadUrl)'
                });

                // Enable iframe cross-domain access via redirect option:
                $fileUploadForm.fileupload(
                    'option',
                    'redirect',
                    window.location.href.replace(
                        /\/[^\/]*$/,
                        '/cors/result.html?%s'
                    )
                );

                // Demo settings:
                $fileUploadForm.fileupload('option', {
                    url: $fileUploadForm.fileupload('option', 'url'),
                    // Enable image resizing, except for Android and Opera,
                    // which actually support image resizing, but fail to
                    // send Blob objects via XHR requests:
                    disableImageResize: /Android(?!.*Chrome)|Opera/
                        .test(window.navigator.userAgent),
                    maxFileSize: @Model.MaxFileSize,
                    acceptFileTypes: @Model.FileTypesReg
                });


                // Initialize the jQuery File Upload widget:
                $fileUploadForm.fileupload({
                    // Uncomment the following to send cross-domain cookies:
                    //xhrFields: {withCredentials: true},
                    autoUpload: false,
                    url: '@Html.Raw(Model.UploadUrl)'
                });

                // initialize uniform checkboxes
                App.initUniform('.fileupload-toggle-checkbox');
            }

        };

    }();

    //FormFileUpload.init();

</script>


<form id="multiFileUpload" action="@Html.Raw(Model.UploadUrl)" method="POST" enctype="multipart/form-data">
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="row fileupload-buttonbar">
        <div class="col-lg-7">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="fa fa-plus"></i>
                <span>
                    添加文件
                </span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-info start">
                <i class="fa fa-upload"></i>
                <span>
                    开始上传
                </span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="fa fa fa-ban"></i>
                <span>
                    取消上传
                </span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="fa fa-trash-o"></i>
                <span>
                    删除
                </span>
            </button>
            <input type="checkbox" class="toggle">
            <!-- The loading indicator is shown during file processing -->
            <span class="fileupload-loading">
            </span>
        </div>
        <!-- The global progress information -->
        <div class="col-lg-5 fileupload-progress fade">
            <!-- The global progress bar -->
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar progress-bar-success" style="width:0%;">
                </div>
            </div>
            <!-- The extended global progress information -->
            <div class="progress-extended">
                &nbsp;
            </div>
        </div>
    </div>
    <!-- The table listing the files available for upload/download -->
    <table role="presentation" class="table table-striped clearfix">
        <tbody class="files"></tbody>
    </table>
</form>
